<template>
  <div class="editWra">
    <div class="editTitle">财务结算报表>编辑</div>
    <div class="line">
      <div></div>
    </div>
    <div class="editSelect">
      <el-form :label-position="labelPosition" label-width="140px" :model="formLabelAlign" status-icon :rules="rules2" ref="formLabelAlign">
        <div class="title">结算基本信息</div>
        <el-row :gutter="10">
          <el-col :span="8">          
              <el-form-item label="名称">
                    <el-date-picker
                        v-model="formLabelAlign.settlementDate"
                        type="month"
                        placeholder="请输入时间"
                        value-format="yyyy-MM">
                    </el-date-picker>
              </el-form-item>
          </el-col>
          <el-col :span="8">
             <el-form-item label="ID">
              <el-input disabled v-model="formLabelAlign.id" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">                    
            <el-form-item label="结算方式">
                <el-select v-model="formLabelAlign.settlementMode" placeholder="结算方式">
                    <el-option
                    v-for="item in options1"
                    :key="item.label"
                    :label="item.label"
                    :value="item.label">
                    </el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="广告主">
              <el-input v-model="formLabelAlign.advertiser" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投放产品">
              <el-input v-model="formLabelAlign.product" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属后台">
              <el-input v-model="formLabelAlign.belongBackstage" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="所属账号">
              <el-input v-model="formLabelAlign.account"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="对应销售">
              <el-input v-model="formLabelAlign.sales"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="媒体公司全称">
              <el-input v-model="formLabelAlign.mediaOpenName"  clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="结算媒体公司全称">
              <el-input v-model="formLabelAlign.mediaSettlementName"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属直销、渠道名称">
              <el-input v-model="formLabelAlign.channelName"  clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">收退款信息(客户)</div>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="我方主体">
              <el-input v-model="formLabelAlign.ownerBody"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">                    
            <el-form-item label="收退款属性">
                <el-select v-model="formLabelAlign.receiveRefundAttribute" placeholder="收退款属性">
                    <el-option
                    v-for="item in options"
                    :key="item.label"
                    :label="item.label"
                    :value="item.label">
                    </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="消耗" prop="consume">
              <el-input v-model="formLabelAlign.consume"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="接入单价(元)" prop="accessPrice">
              <el-input v-model="formLabelAlign.accessPrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实收金额(元)" prop="customerOfficialAmount">
              <el-input v-model="formLabelAlign.customerOfficialAmount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应收金额(元)" prop="customerReceiveAmount">
              <el-input v-model="formLabelAlign.customerReceiveAmount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="应收余额(元)" prop="customerReceiveBalance">
              <el-input v-model="formLabelAlign.customerReceiveBalance"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预收余额(元)" prop="customerOfficialBalance">
              <el-input v-model="formLabelAlign.customerOfficialBalance"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退款金额(元)" prop="customerRefundAmount">
              <el-input v-model="formLabelAlign.customerRefundAmount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="客户结算数据">
              <el-input v-model="formLabelAlign.customerSettlementData"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户折扣属性">
              <el-input v-model="formLabelAlign.customerRebateAttribute"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户折扣描述">
              <el-input v-model="formLabelAlign.customerRebateDescribe"  clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="客户收/退款日期(天)">
                <el-date-picker
                  v-model="formLabelAlign.customerReceiveRefundDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银行收/退款流水号">
              <el-input v-model="formLabelAlign.customerBankReciveRefundNo"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户付款单位名称">
              <el-input v-model="formLabelAlign.customerPaymentName"  clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">开票信息(客户)</div>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="是否开票">
              <el-input v-model="formLabelAlign.customerInvoiceState" disabled clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开票内容">
              <el-input v-model="formLabelAlign.customerInvoiceContent"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开票产品">
              <el-input v-model="formLabelAlign.customerInvoiceProduct"  clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="客户发票号">
              <el-input v-model="formLabelAlign.customerInvoiceNo"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户开票类别">
                <el-select v-model="formLabelAlign.customerInvoiceType" placeholder="请选择开票类别">
                    <el-option
                    v-for="item in options2"
                    :key="item.label"
                    :label="item.label"
                    :value="item.label">
                    </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发票金额(元)" prop="customerInvoiceAmount">
              <el-input v-model="formLabelAlign.customerInvoiceAmount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="价税合计(元)" prop="customerPriceTaxTotal">
              <el-input v-model="formLabelAlign.customerPriceTaxTotal"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="税额(元)" prop="customerInvoiceTax">
              <el-input v-model="formLabelAlign.customerInvoiceTax"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户开票日期">
              <el-input v-model="formLabelAlign.customerInvoiceDate"  clearable></el-input> 
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">付款信息(媒体)</div>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="投放单价(元)" prop="releasePrice">
              <el-input v-model="formLabelAlign.releasePrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应付金额(元)" prop="paymentAmount">
              <el-input v-model="formLabelAlign.paymentAmount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实付金额(元)" prop="officialAmount">
              <el-input v-model="formLabelAlign.officialAmount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="退款金额(元)" prop="refundAmount">
              <el-input v-model="formLabelAlign.refundAmount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="媒体折扣属性">
              <el-input v-model="formLabelAlign.mediaRebateAttribute"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="媒体折扣描述">
              <el-input v-model="formLabelAlign.mediaRebate"  clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="渠道结算数据">
              <el-input v-model="formLabelAlign.channelSettlementData"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="支付后台日期">
              <el-date-picker
                v-model="formLabelAlign.payBckstageDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银行付/退款流水号">
              <el-input v-model="formLabelAlign.bankReciveReundNo"  clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">开票信息(媒体)</div>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="是否收票">
              <el-input disabled v-model="formLabelAlign.mediaInvoiceState"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开票公司名称">
              <el-input v-model="formLabelAlign.mediaInvoiceCompany"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开票产品">
              <el-input v-model="formLabelAlign.mediaInvoiceProduct"  clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="开票内容">
              <el-input v-model="formLabelAlign.mediaInvoiceContent"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发票号">
              <el-input v-model="formLabelAlign.mediaInvoiceNo"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发票金额(元)" prop="mediaInvoiceAmount">
              <el-input v-model="formLabelAlign.mediaInvoiceAmount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="价税合计(元)" prop="mediaInvoicePriceTaxTotal">
              <el-input v-model="formLabelAlign.mediaInvoicePriceTaxTotal"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="税额(元)" prop="mediaInvoiceTax">
              <el-input v-model="formLabelAlign.mediaInvoiceTax"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="购货单位">
              <el-input v-model="formLabelAlign.mediaInvoicePurchase"  clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="媒体开票日期(天)">
              <el-date-picker
                v-model="formLabelAlign.mediaInvoiceDate"
                type="date"
                placeholder="选择日期"
                 value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">                    
            <el-form-item label="媒体开票类别">
                <el-select v-model="formLabelAlign.mediaInvoiceType" placeholder="请选择开票类别">
                    <el-option
                    v-for="item in options3"
                    :key="item.label"
                    :label="item.label"
                    :value="item.label">
                    </el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="含税毛利(元)" prop="taxMargin">
              <el-input v-model="formLabelAlign.taxMargin"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="22">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                :rows="8"
                placeholder="请输入内容"
                v-model="formLabelAlign.remark">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="editBtom">
        <el-button type="primary" round @click="submitForm('formLabelAlign')">确定</el-button>
        <el-button type="primary" round @click="back">关闭</el-button>
    </div>
  </div>
</template>
<script>
  export default{
    name:'edit',
    data(){
      var checkAge = (rule, value, callback) => {
        console.log(value)
        if(value==null||value==''){
          callback();
        }
        var reg = /^-?([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$/;
        if (!reg.test(value)) {
          callback(new Error('请输入数正确的数字格式'));
        } else {
            callback();
        }
      };
      return{
        rules2: {
          consume: [
            { validator: checkAge, trigger: 'blur' },
          ],
          accessPrice: [
            { validator: checkAge, trigger: 'blur' },
          ],
          customerOfficialAmount: [
            { validator: checkAge, trigger: 'blur' },
          ],
          customerReceiveAmount: [
            { validator: checkAge, trigger: 'blur' },
          ],
          customerReceiveBalance: [
            { validator: checkAge, trigger: 'blur' },
          ],
          customerOfficialBalance: [
            { validator: checkAge, trigger: 'blur' },
          ],
          customerRefundAmount: [
            { validator: checkAge, trigger: 'blur' },
          ],
          mediaInvoiceAmount: [
            { validator: checkAge, trigger: 'blur' },
          ],
          mediaInvoicePriceTaxTotal: [
            { validator: checkAge, trigger: 'blur' },
          ],
          mediaInvoiceTax: [
            { validator: checkAge, trigger: 'blur' },
          ],
          taxMargin: [
            { validator: checkAge, trigger: 'blur' },
          ],
          customerInvoiceAmount: [
            { validator: checkAge, trigger: 'blur' },
          ],
          releasePrice: [
            { validator: checkAge, trigger: 'blur' },
          ],
          paymentAmount: [
            { validator: checkAge, trigger: 'blur' },
          ],
          officialAmount: [
            { validator: checkAge, trigger: 'blur' },
          ],
          refundAmount: [
            { validator: checkAge, trigger: 'blur' },
          ],
          mediaInvoiceTax: [
            { validator: checkAge, trigger: 'blur' },
          ],
          customerInvoiceTax: [
            { validator: checkAge, trigger: 'blur' },
          ],
          customerPriceTaxTotal: [
            { validator: checkAge, trigger: 'blur' },
          ],
        },
        labelPosition: 'left',
        formLabelAlign: {
          settlementDate:'',
          id:null,
          settlementMode:'',
          advertiser:'',
          product:'',
          belongBackstage:'',
          account:'',
          sales:'',
          mediaOpenName:'',
          mediaSettlementName:'',
          channelName:'',
          ownerBody:'',
          receiveRefundAttribute:'',
          consume:'',
          accessPrice:'',
          customerOfficialAmount:'',
          customerReceiveAmount:'',
          customerReceiveBalance:'',
          customerOfficialBalance:'',
          customerRefundAmount:'',
          customerSettlementData:'',
          customerRebateAttribute:'',
          customerRebateDescribe:'',
          customerReceiveRefundDate:'',
          customerBankReciveRefundNo:'',
          customerPaymentName:'',
          customerInvoiceState:'',
          customerInvoiceContent:'',
          customerInvoiceProduct:'',
          customerInvoiceNo:'',
          customerInvoiceType:'',
          customerInvoiceAmount:'',
          customerPriceTaxTotal:'',
          customerInvoiceTax:'',
          customerInvoiceDate:'',
          releasePrice:'',
          paymentAmount:'',
          officialAmount:'',
          refundAmount:'',
          mediaRebateAttribute:'',
          mediaRebate:'',
          channelSettlementData:'',
          payBckstageDate:'',
          bankReciveReundNo:'',
          mediaInvoiceState:'',
          mediaInvoiceCompany:'',
          mediaInvoiceProduct:'',
          mediaInvoiceContent:'',
          mediaInvoiceNo:'',
          mediaInvoiceAmount:'',
          mediaInvoicePriceTaxTotal:'',
          mediaInvoiceTax:'',
          mediaInvoicePurchase:'',
          mediaInvoiceDate:'',
          mediaInvoiceType:'',
          taxMargin:'',
          remark:''
        },
        options: [ {
            state: '1',
            label: '收款'
        }, {
            state: '2',
            label: '退款'
        }],
        options1: [{
            state: '1',
            label: 'CPA'
        }, {
            state: '2',
            label: 'CPC'
        }, {
            state: '3',
            label: 'CPA+CPC'
        }],
        options2: [{
            state: '1',
            label: '增值税专用发票'
        }, {
            state: '2',
            label: '增值税普通发票'
        }],
        options3: [{
            state: '1',
            label: '增值税专用发票'
        }, {
            state: '2',
            label: '增值税普通发票'
        }],
        id:'',
        loading:''
      }
    },
    created(){
      this.editInfo(this.$route.query.id);
    },
    methods:{
      //数据
      editInfo(id){
        this.$http({
          method:'get',
          url:this.apiUrl.mogenApiQuery,
          params:{id:id}
        }).then(res=>{
          console.log(res)
          this.formLabelAlign = res.data.list[0]
        }).catch()
      },
      //修改数据
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.formLabelAlign)
                this.$confirm('此操作将更改数据, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'info '
                }).then(() => {
                  this.$http({
                    method:'post',
                    url:this.apiUrl.mogenApiEdit,
                    data:this.formLabelAlign
                  }).then(res=>{
                    console.log(res);
                    if(res.data.state==1){
                      this.$message({
                        type: 'success',
                        message: '编辑成功!',
                        duration:2000
                      });
                      this.$router.push({path:'/index'})
                    }else{
                      this.$message({
                        type: 'warning',
                        message: res.data.msg,
                        duration:2000
                      });
                    }
                  }).catch()
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消编辑。',
                    duration:2000
                  });          
                });
          } else {
            this.$message({
              type: 'error',
              message: '请检查字段是否符合要求？!',
              duration:2000
            });
            return false;
          }
        });
      },
      //返回
      back(){
        this.$router.back()
      },
    }
  }
</script>
<style>
.editWra{
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    min-width: 1380px;
    padding: 20px 40px 100px 40px;
    font-size: 16px;
    overflow: scroll;
}
.editWra .line{
  width: 100%;
  padding: 0 40px;
  height: 1px;
  background: #fff;
}
.editWra .line div{
  width: 100%;
  height: 100%;
  background: #e0e0e0;
}
.editWra .editTitle{
  background: #fff;
  padding: 20px 40px;
  color: #999;
}
.editWra .editSelect{
  background: #fff;
  padding: 20px 40px 80px 40px;
  font-size: 14px;
}

.editWra .editSelect .title{
  font-weight: 700;
  color: #107cd8;
  padding-bottom: 35px;
  font-size: 15px;
}
  .el-row {
    margin-bottom: 35px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
.editWra {
  width: 100%;
  height: 100%;
}
.editWra .el-select {
  width: 100%;
}
.editWra .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  height: 100%;
  width: 100%;
}
.editWra .el-input__inner {
  height: 35px;
  line-height: 35px;
  color: #000;
}
.editWra .el-input--suffix .el-input__inner{
}
.editWra .el-input__inner::-webkit-input-placeholder {
  color: #000;
}
.editWra .el-input__inner::placeholder {
  color: #000;
} 
.editWra .el-input__icon{
    line-height: 35px;
}
.editWra .inputText .el-input .el-input__inner {
  line-height: 35px;
  height: 35px;
}
.editWra  .el-input__inner::placeholder {
  color: #999;
}
.editWra  .el-input__inner::-webkit-input-placeholder {
  color: #999;
}
.editBtom{
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  background: #f5f5f5;
}
.editBtom .el-button.is-round{
    border-radius: 4px;
    padding: 6px 18px;
    margin-left: 10px;
}
.editBtom .el-button--primary{
  background-color: #107cd8;
  border-color: #107cd8;
}
.editSelect .block {
  width: 100%;
  height: 100%;
}
.editSelect .block .el-select {
  width: 100%;
} 
.editSelect .block .el-input__inner {
  height: 35px;
  line-height: 35px;
}
</style>

